<template>
	<view class="wrap">
		<view class="item" v-for="(item, index) in list" :key="item.id">
			<image style="width: 128rpx; height: 128rpx; border-radius: 100%" mode="widthFix" :src="item.head_pic"></image>
			<view class="info">
				<view class="name">{{ index + 1 }}号客服微信号：{{ item.wx_no }}</view>
				<view class="btn">
					<view class="wxh btns" @click="copyWx(item.wx_no)">复制微信号</view>
					<view class="code btns" @click="showCode(item.wx_ewr)">二维码</view>
					<!-- <u-button type="primary" shape="circle" size="mini"  text="复制微信号" color="#21B579"></u-button>
					<u-button type="primary" shape="circle" size="mini"  text="二维码" color="#21B579"></u-button> -->
				</view>
			</view>
		</view>
		<view class="bottom">
			<u-button type="primary" shape="circle" text="服务热线：122-1234-5678" @click="call('122-1234-5678')" color="#21B579"></u-button>
		</view>
		<u-modal :show="show" :showConfirmButton="false" @close="close" closeOnClickOverlay>
			<view class="slot-content">
				<image style="width: 300rpx; height: 300rpx" mode="widthFix" :src="img"></image>
			</view>
		</u-modal>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: [],
			show: false,
			img: ''
		};
	},
	onLoad() {
		this.getCustomeService();
	},
	methods: {
		getCustomeService() {
			this.$api.post('/fit/customers').then((res) => {
				console.log(res);
				this.list = res.data.list;
			});
		},
		copyWx(text) {
			uni.setClipboardData({
				data: text,
				success: function () {
					// console.log('success');
				}
			});
		},
		showCode(img) {
			this.img = img;
			this.show = true;
		},
		close() {
			this.show = false;
		},
		call(phone) {
			uni.makePhoneCall({
				phoneNumber: phone
			});
		}
	}
};
</script>

<style scoped lang="scss">
.wrap {
	padding: 0 32rpx;
	.item {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 32rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 32rpx;
		.info {
			.name {
				font-size: 28rpx;
				color: #333;
				text-align: right;
			}
			.btn {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				margin-top: 24rpx;
				.btns {
					border-radius: 30rpx;
					padding: 8rpx 32rpx;
					font-size: 26rpx;
				}
				.wxh {
					background-color: #21b579;
					color: #fff;
					margin-right: 24rpx;
				}
				.code {
					background-color: #f8f9fa;
					color: #333;
				}
			}
		}
	}
	.bottom {
		position: fixed;
		bottom: 32rpx;
		left: 32rpx;
		right: 32rpx;
	}
}
</style>
